<!doctype html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, async-api, Web Component, web-hooks, OpenAPI, REST, themes, dark mode, markdown, API documentation">

  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Exo:wght@300;500&display=swap" rel="stylesheet">

  <!-- Code Highlight -->
  <link rel="stylesheet" href="./prismjs/prism.css">
  <script src="./prismjs/prism.js"></script>

  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="table.css">

  <title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
  <style>
    .m-table {
      width:100%;
    }
    #main-img{
      width:740px;
    }
    .container {
      border:1px solid #aaa;
      border-radius: 4px;
      margin:12px;
      padding:8px;
      width: 200px;
      display:flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    }
    .container.blue{
      color: #fff;
      border-color:#4099ff;
      background: linear-gradient(45deg,#4099ff,#73b4ff);
    }
    .container.red{
      color: #fff;
      border-color:#FF5370;
      background: linear-gradient(45deg,#FF5370,#ff869a);
    }
    .container.green{
      color: #fff;
      border-color:#2ed8b6;
      background: linear-gradient(45deg,#2ed8b6,#59e0c5);
    }
    .container.green a,
    .container.blue a,
    .container.red a {
      font-weight:300;
      color: #ffffffee;
    }
  </style>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>
  <div  class="banner" style="max-height:400px; overflow:hidden;">
    <div class="topbar">
      <div class="header">
        <a class="menu-item" data-action="url" href="./index.html">
          <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
        </a>
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item" data-action="url" href="./index.html"> Home </a>
          <a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item hide-in-mobile" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>

    <!--Waves Container-->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
    <!--Waves end-->
  </div>

  <div style="display:flex; flex-direction: column; margin:10px 200px">
    <h1> Mixing HTML</h1> 
    <p> To mix your own HTML, just place it in between the <span class = "mono bold blue"> &lt;rapi-doc&gt; </span> 
      and you should see the content appearing at the top of the main section
    </p>

    <pre class="shadow1 code-block">
      <code class="language-html">
        &lt;rapi-doc spec-url = "https://petstore.swagger.io/v2/swagger.json"&gt;

          &lt;h1&gt; Hello World !!!  &lt;/h1&gt; 

        &lt;/rapi-doc&gt;
      </code>
    </pre>
        
    <h2> Placing HTML Content</h2> 
    <p>
      The above code will place your HTML content just at the start of the main content area (below the header), 
      but what if you want to place your HTML in a different location. <span class = "bold blue"> SLOT</span> is your friend here, It allows you to place your custom HTML content in certain strategic locations 
      <br/><br/>
      For instance the below code will place the HTML content at the bottom of the very bottom of the API doc. (check <span class="mono bold"> slot="footer"</span> attribute of the div)
    </p>
    <pre class="shadow1 code-block">
      <code class="language-html">
        &lt;rapi-doc spec-url = "https://petstore.swagger.io/v2/swagger.json"&gt;

          &lt;div slot="footer"&gt; The End  &lt;/div&gt; 

        &lt;/rapi-doc&gt;
      </code>
    </pre>

    <h2> Slots</h2>
    <div class="table-block">
      <table class="m-table">
        <tr>
          <th >Slot Name</th>
          <th >Description </th>
        </tr>
        <tr>
          <td class="mono bold right">(default)</td>
          <td class="gray">any content placed inside <code>&lt;rapi-doc&gt;</code> tag, will be shown immediately under the header and above the info section </td>
        </tr>
        <tr>
          <td class="mono bold right">logo</td>
          <td class="gray">use this slot to replace the logo </td>
        </tr>
        <tr>
          <td class="mono bold right">header</td>
          <td class="gray"> The contents of this slot will appear at the header after the spec-url input</td>
        </tr>
        <tr>
          <td class="mono bold right">footer</td>
          <td class="gray"> The contents of this slot will appear at the bottom of the spec</td>
        </tr>
        <tr>
          <td class="mono bold right">nav-logo</td>
          <td class="gray"> The contents of this slot will appear on Side navigation bar (only available in read-mode)</td>
        </tr>
      </table>
    </div>

    <h2> Examples </h2>
    <div style="display:flex; width:100%; flex-wrap:wrap; justify-content:left;">

      <div class = "container">
        <a href="./examples/mix-html.html"> Embed HTML In RapiDoc  </a>
        <div class = "c-description" >
          Add html at the start and bottom
        </div>
      </div>

      <div class = "container">
        <a href="./examples/example8.html"> Add Buttons on Header </a>
        <div class = "c-description" >
          Blue button on the header, helps easy api-key assignment
        </div>
      </div>

      <div class = "container">
        <a href="./examples/schema-table.html"> Add Buttons on Navbar </a>
        <div class = "c-description" >
          Change schema-style on the fly
        </div>
      </div>

    </div>
  </div>
</body>

</html>
